<template>
  <div class="leagueListPane">
    <div class="leagueInfo" v-for="(league,index) in leagues" :key="index"><!-- v-for 不能写到当前组件的根目录-->
       <div class="leagueTitle"  v-on:mouseover="leagueChange(index)"><span class="imgSpan"><img :src="getImgUrl(league.ico)"></span><span class="nameSpan">{{league.name}}</span></div>
       <div class="teamListPane" v-show="index==num">
         <div class="teamInfo"  v-for="(team,teamIndex) in league.teams" >
           <div class="imgDiv"><img :src="getImgUrl(team.pic)"></div><div class="nameDiv">{{team.name}}</div>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
  import api from "../../../axios/api"
    export default {
        name: "leagues",
        data(){
          return {
            leagues:[],//定义一个空的数组
            num : 2  //默认显示的下标为0
          }
        },
        methods:{
          getImgUrl:function(imgsrc){
            return  "../../../static/images/league/"+imgsrc;
          },
          setDataFromAxios:function(){
            //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
             api.setDataFromAxios("/league",null,"post")
               .then(res=>{this.leagues = res.leagues});//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
            },
            leagueChange:function(index){
               this.num = index;
            }
          },
      //vue init方法 当前页面初始化就自动执行的方法 一般用于页面初始化就读取数据
        created:function () {
          this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
        }
    }
</script>

<style lang="stylus">
  .leagueListPane
    margin 0 auto
    width 1000px
    height 300px;
    position relative
    .leagueInfo
       float left
       width 118px;
       height 30px;
       .leagueTitle
        .imgSpan
          width   40px
          height  36px
          display inline-block
          img
            width   40px
            height  36px
            display inline-block
        .nameSpan
           width 40px
           height 30px
           line-height 30px
           display inline-block
       .teamListPane
           width 1000px
           position absolute
           left 0
           .teamInfo
             float left
             margin 20px 100px 0 20px
             .imgDiv
              width 80px
              height 80px
              img
                width 80px
                height 80px
  .leagueInfo:after
    clear both
    display block
    content ""

</style>
